<!DOCTYPE html>
<html>
<head lang="zh-CN">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <title>dataTree(树型控件)测试页面</title>
    <link href="/static/css/index.css" rel="stylesheet" type="text/css">
    <link href="/static/css/controls.css" rel="stylesheet" type="text/css">
    <style>[ng-cloak]{display:none}</style>
</head>
<body  ng-controller="DataTreeController">
    <g-data-source
            url="http://localhost/demo/treedata"
            data-params="testParams"
            page="false"
            allow-auto-load="true"
            data-source-name="treeSource">
    </g-data-source>

    <g-data-source
            url="http://localhost/demo/async/treedata"
            data-params="testParams"
            page="false"
            allow-auto-load="true"
            data-source-name="asyncTreeSource">
    </g-data-source>

    <!--树形控件-->
    <div class="section">
        <div class="section_header">
            树形控件
        </div>
        <div class="section_body">
            <ul class="control_List">
                <li >
                <!--
                    树型下拉框使用说明:
                    标签名称:g-data-tree,
                    属性：1)[必选]mode:树型下拉框类型，radio：单选;check：多选
                          2)[必选]data-source-name：配置的数据源名称
                          3)[必选]id-prop:数据项的主键字段名称，parent-prop的值，用于确定父子关系.
                          4)[必选]parent-prop:父结点标示字段。
                          5)[必选]display-express:页面显示字段名称.
                          6)[必选]value-prop:结点值字段名称
                          7)[必选]async:数据是否为异步加载。
                          8)[可选]is-expand-all:首次显示时，是否展开所有结点,默认false
                          9)[可选]width：设置控件的宽度
                          10)[可选]height:设置控件的高度
                          11)[可选]disabled:设置控件禁用
                          12)[可选]ng-show：显示隐藏控件
                          13)[可选]show-select:是否显示勾选框。可是表达式（如:id==="id4"）,也可以是一个函数(其中参数为数据源中的当前行)
                          14)[可选]ng-model:双向绑定的值。(绑定数据源中的选中项。数组形式存储)
                          15)[可选]choose-items:为选中的项，类型为数组类型
                          16)[可选]current-row:当前行对应的数据项
                          17)[可选]on-before-select:选中前行执行函数(参数为数据源的当前记录)
                          18)[可选]on-select:选中行后执行函数(参数为数据源的当前记录)
                          19)[可选]on-before-check:勾选前执行事件(参数为数据源的当前记录)
                          20)[可选]on-check:勾选后执行事件(参数为数据源的当前记录)

                          17)mode为check多选时特有属性:
                                1)[可选]allow-cascade-select：是否级联选择,true:选择父结点同时自动选择所有子孙结点(注:只有async='false'时有效)
                                2)[可选]allow-choose-parent: 是否允许选择父结点,默认为true.
                          18)async为true时特有属性
                                1)[必选]has-child-prop：标示此结点是否含有子结点。
                     -->

                    <g-data-tree mode="radio" width="400px" height="300px"  allow-choose-parent="false"
                                 ng-model="radioValue" choose-items="radioItems" current-row="radiorow" parent-prop="parent"
                                 data-source-name="treeSource" async="false" is-expand-all="false" has-child-prop="hasChild"
                                 on-before-select="beforeSelect" on-select="afterSelect" on-before-check="beforeCheck" on-check="afterCheck"
                                 display-express="display" value-prop="value" id-prop="id" show-select="showSelect">
                    </g-data-tree>
                </li>
                <li>
                    <g-data-tree mode="check" width="400px" height="300px"  allow-choose-parent="false"  allow-cascade-select="true"
                                 ng-model="checkValues" choose-items="checkedItems" current-row="checkedrow" parent-prop="parent" has-child-prop="hasChild"
                                 data-source-name="treeSource" async="false"  is-expand-all="false"
                                 display-express="display" value-prop="value" id-prop="id" show-select="id!=='id9'">
                    </g-data-tree>
                </li>

            </ul>
        </div>
    </div>
    <div style="margin:0px 120px;">
        <label>单选框的值：</label><input style="display: inline-block" g-width="200px" type="text" ng-model="radioValue" class="form-text">
        <label>多选框的值：</label><input style="display: inline-block"   g-width="200px"  type="text" ng-model="checkValues" class="form-text">
    </div>


<script>
        var ctx = '';
        var basePath = '/gillion-web';
        var locale = 'zh-cn'
    </script>
    <script src="/bower_components/requirejs/require.js" data-main="/static/app.js"
            data-bootstrap-modules="['framework/datatree/TestDataTreeModule']"></script>
</body>
</html>